<template>
  <div class="outcomesCourseList">
    <pageTitle :data="titleData" />
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="730"
      empty-text="暂无学习的课程"
      v-loading="tableLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column prop="name" label="课程名" align="center" />
      <el-table-column prop="credit" label="学分" align="center" />
      <el-table-column prop="score" label="得分" :formatter="formatter" align="center" sortable />
      <el-table-column prop="ranking" label="同期排名" align="center" sortable :formatter="formatter"  />
      <el-table-column prop="gpa" label="绩点" :formatter="formatter" align="center" sortable />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleMoreDesc(scope.row)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="checkIsCreated(scope.row)"
            :style="{color: scope.row.stuShow ? '#67c23a':'#66b1ff'}"
          >
            {{scope.row.stuShow ? '管理学业' : '创建学业'}}
          </el-button>
          <el-popover placement="bottom" width="280" v-model="scope.row.visibleAuth">
            <div>
              <p style="text-align: center">权限设置</p>
              <div style="text-align: center">
                <el-radio v-model="currSelectRow.state" label="公开" />
              </div>
              <div style="text-align: center">
                <el-radio v-model="currSelectRow.state" label="私有" />
              </div>
            </div>
            <div style="text-align: right; margin: 0">
              <el-button type="text" size="mini" @click="scope.row.visibleAuth = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="handleConfirmEdit(scope.row)"
                >确定</el-button
              >
            </div>
            <el-button
              type="text"
              size="small"
              style="margin-left: 10px"
              @click="handleEditAuth(scope.row)"
              slot="reference"
              :disabled="!scope.row.stuShowData"
              :title="!scope.row.stuShowData ? '请先创建学业': '公开权限'"
            >
              权限
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const pageTitle = () => import("@/views/user/user/component/pageTitle");
import { getStuShowList, stuShowCreate, stuShowUpdate} from "@/request/stushow.js";
import { getStuShowDetailToUser } from "@/request/stushow.js";
import { mapState } from 'vuex';
import { parse } from 'qs';
export default {
  components: {
    pageTitle,
  },
  data() {
    return {
      titleData: {
        name: "课程列表",
      },
      tableData: [
        // {
        //   name: "课程1",
        //   credit: 1,
        //   score: 90,
        //   ranking: 1,
        //   gpa: undefined,
        // },
      ],
      tableLoading: false,
      visibleAuth: false,
      currSelectRow: {
        state: null
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      defaultData: (state) => state.stuShow.defaultData
    }),
  },
  watch: {
    "$store.state.courses.chooseCourses"(n) {
      this.setCourseList();
    },
    tableData() {
      this.gStuShow();
    },
  },
  async created() {
    this.tableLoading = true
    this.setCourseList();
    this.gStuShow();
  },
  methods: {
    handleMoreDesc(row) {
      this.$router.push({
        name: "Curr",
        // query: {
        //   courseId: row.courseID,
        //   currNo: row.currNo,
        // },
        params: {
          id: row.currNo,
        },
      });
    },
    handleEditAuth(row) {
      this.currSelectRow.state = row.stuShowData?.state || false
    },
    setCourseList() {
      this.tableLoading = false
      this.tableData = this.$store.state.courses.chooseCourses;
    },
    formatter(value, row) {
      return value[row.property] ? row?.property ? value[row.property] : "无" : "无";
    },
    // 将已创建学业的课程赋值
    async gStuShow() {
      const res = await this.$store.dispatch("stuShow/gStuShowList",{ userID: this.userInfo.userID});
      if(!res) return
      this.tableData.forEach(item => {
        res.forEach(sitem => {
          if (sitem.currNo === item.currNo) {
            this.$set(item, "stuShow", true) 
            this.$set(item, "stuShowData", sitem)
          }
        })
      })
    },
    // 判断是否已经创建学业
    checkIsCreated(row) {
      if (row.stuShow) {
        const { name, query } = this.$route
        this.$router.push({
          name: name,
          query: {
            pageName: "oUpload",
            currNo: row.currNo,
            type: 'edit',
            stuworkshowID: row.stuShowData.stuworkshowID
          }
        })
      } else {
        this.createStuOutcomes(row)
      }
    },
    async createStuOutcomes(row) {
      this.$store.dispatch("stuShow/createStuOutcomes", {userID: this.userInfo.userID, currNo: row.currNo, that: this})
    },
    // 确认编辑权限
    async handleConfirmEdit(row) {
      this.$set(row, "visibleAuth", false)
      const gStuShowList = await this.$store.dispatch("stuShow/gStuShowList", {userID: this.userInfo.userID})
      const gStuShowData = gStuShowList.find(item => item.currNo == row.currNo)
      if (!gStuShowData) return this.$antdMessage.error({contnet: "修改失败!"})
      const params = {
        userID: this.userInfo.userID,
        currNo: row.currNo,
        homepagepath: ``,
        filepaths: [],
        stuworkshowID: row.stuShowData.stuworkshowID,
        state: this.currSelectRow.state,
        grade: '优秀'
      }
      Object.assign(params, gStuShowData)
      params.state = this.currSelectRow.state
      const res = await stuShowUpdate(params)
      if (res.errno == 0) {
        this.$antdMessage.success({content: '修改成功!'})
        this.$store.commit("stuShow/stushowDataUpadateToList", params)
      } else this.$antdMessage.error({content: res.message || '修改失败!'})
    },
    // 修改学业展示
    
  },
};
</script>

<style lang="stylus" scoped>
.outcomesCourseList {
  flex: 1;
  padding: 23px 0 0 63px;
}
</style>